<template>
  <div class="map">
    <Header id='header' />
    <div class="container">
      <div class="map-contain" id="allmap"></div>
      <!-- 左侧弹框 -->
      <div
        class="left_model"
        :class="moveFlag ? 'leftmodelgo' : 'leftmodelback'"
      >
        <div class="left_model_content">
          <div class="content_title">查询</div>
          <div class="search_box">
            <el-form
              :model="ruleForm"
              :inline="true"
              ref="ruleForm"
              label-width="88px"
            >
              <el-form-item label="区/县:">
                <el-select
                  @change="changeArea"
                  clearable
                  v-model="ruleForm.area"
                  placeholder="请选择"
                  @clear="clearArea"
                >
                  <el-option
                    v-for="item in areaList"
                    :key="item.id"
                    :label="item.areaName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="街道/乡镇:">
                <el-select
                  @change="changeStreet"
                  clearable
                  v-model="ruleForm.street"
                  placeholder="请选择"
                  @clear="clearStreet"
                >
                  <el-option
                    v-for="item in streetList"
                    :key="item.id"
                    :label="item.areaName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="scroll_box">
            <vue-seamless-scroll
              v-if="cemeteryList.length > 0"
              :data="cemeteryList"
              class="seamless_warp"
              :class-option="classOption"
            >
              <div
                class="list_item"
                @click="goToStreet(item)"
                v-for="(item, index) in cemeteryList"
                :key="index"
              >
                <div class="item_title">{{ item.orgName }}</div>
                <div class="item_type">类别：{{ item.typeText }}</div>
                <div class="item_desc">简介：{{ item.orgDesc }}</div>
              </div>
            </vue-seamless-scroll>
            <!-- <el-empty  description="暂无数据"></el-empty> -->
            <div v-else class="empty_box">

              <img src="../assets/imgs/empty.png" alt="">
              <span>暂无数据</span>
            </div>
          </div>
          <div class="bottom_box">
            <div class="bottom_top">
              <div class="top_title">{{selectedArea.areaText}}</div>
              <div class="data_box">
                <div class="box_item">
                  <span>公墓数</span>
                  <countTo
                    class="font_number"
                    :startVal="0"
                    :endVal="selectedArea.cemeteryTotal"
                    :duration="3000"
                  ></countTo>
                </div>
                <div class="box_item">
                  <span>墓位数</span>
                  <countTo
                    class="font_number"
                    :startVal="0"
                    :endVal="selectedArea.graveTotal"
                    :duration="3000"
                  ></countTo>
                </div>
                <div class="box_item">
                  <span>安葬数</span>
                  <countTo
                    class="font_number"
                    :startVal="0"
                    :endVal="selectedArea.buryTotal"
                    :duration="3000"
                  ></countTo>
                </div>
              </div>
            </div>
            <vue-seamless-scroll
              v-if="areaDataList.length > 0"
              :data="areaDataList"
              class="bottom_warp"
              :class-option="classOption1"
            >
              <div
                class="list_item"
                v-for="(item, index) in areaDataList"
                :key="index"
              >
                <div class="item_title">{{ item.areaText }}</div>
                <div class="item_box">
                  <div class="box_item">
                    <span>公墓数</span>
                    <countTo
                      class="font_number"
                      :startVal="0"
                      :endVal="item.cemeteryTotal"
                      :duration="3000"
                    ></countTo>
                  </div>
                  <div class="box_item">
                    <span>墓位数</span>
                    <countTo
                      class="font_number"
                      :startVal="0"
                      :endVal="item.graveTotal"
                      :duration="3000"
                    ></countTo>
                  </div>
                  <div class="box_item">
                    <span>安葬量</span>
                    <countTo
                      class="font_number"
                      :startVal="0"
                      :endVal="item.buryTotal"
                      :duration="3000"
                    ></countTo>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <!-- 展示隐藏按钮 -->
      <el-button
        @click="moveFlag = !moveFlag"
        class="model_close"
        type="primary"
        :icon="moveFlag ? 'el-icon-back' : 'el-icon-right'"
        circle
      ></el-button>
      <el-button
        v-if="selectedSecondName"
        @click="backAreaCounty"
        class="back1_btn"
        type="primary"
        >返回区/县</el-button
      >
      <el-button
        v-if="selectedName"
        @click="backCity"
        class="back2_btn"
        type="primary"
        >返回市</el-button
      >
      <div class='icon-wrapper' id='iconwrapper' style='width: 150px; height: 355px;' v-show='markers.length>0'>
        <i class='el-icon-arrow-up toggle-icon' title='收起' v-on:click='packup' v-if='unfold'></i>
        <i v-else class='el-icon-arrow-down toggle-icon' title='展开' v-on:click='unfolder'></i>
        <ul class='icons'>
          <li class='icon-item' v-on:click='filterMarker("全部")'>
            <img src='../assets/imgs/tip0.png' width='32'>
            <em>全部</em>
          </li>
          <li class='icon-item' v-on:click='filterMarker("公益性公墓")'>
            <img src='../assets/imgs/tip1.png' width='32'>
            <em>公益性公墓</em>
          </li>
          <li class='icon-item' v-on:click='filterMarker("骨灰堂")'>
            <img src='../assets/imgs/tip2.png' width='32'>
            <em>骨灰堂</em>
          </li>
          <li class='icon-item' v-on:click='filterMarker("深埋不留坟头")'>
            <img src='../assets/imgs/tip3.png' width='32'>
            <em>深埋不留坟头</em>
          </li>
          <li class='icon-item' v-on:click='filterMarker("农村公益性公墓")'>
            <img src='../assets/imgs/tip4.png' width='32'>
            <em>农村公益性公墓</em>
          </li>
          <li class='icon-item' v-on:click='filterMarker("经营性公墓")'>
            <img src='../assets/imgs/tip5.png' width='32'>
            <em>经营性公墓</em>
          </li>
          <li class='icon-item' v-on:click='filterMarker("海葬")'>
            <img src='../assets/imgs/tip6.png' width='32'>
            <em>海葬</em>
          </li>
          <li class='icon-item' v-on:click='filterMarker("殡仪馆")'>
            <img src='../assets/imgs/tip7.png' width='32'>
            <em>殡仪馆</em>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog title="大图预览" :visible.sync="dialogImageVisible" class='image-dialog'>
      <i class='prev el-icon-arrow-left' v-bind:style='{visibility: curindex > 0 ? "visible" : "hidden"}' title='上一张' v-on:click='curindex == 0 ? "" : curindex--'></i>
      <el-image v-bind:src='images[curindex] ? images[curindex] : ""' class='curimg'></el-image>
      <i class='next el-icon-arrow-right' v-if='curindex < images.length - 1' title='下一张' v-on:click='curindex++'></i>
    </el-dialog>
    <el-dialog title="详细介绍" :visible.sync="dialogDescVisible" class='image-dialog'>
      <p class='desc'>{{desc}}</p>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import {
  loadAdministrativeAreaListWithParentId,
  findCountList,
  findListByStreet,
  findCemeteryList,
  findCityData,
} from "@/api/home.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import countTo from "vue-count-to";
const jsts = require("jsts/dist/jsts.min.js");
import "echarts/extension/bmap/bmap";
export default {
  components: {
    Header,
    countTo,
    vueSeamlessScroll,
  },
  data() {
    return {
      totalwidth: 0,
      dom: '',
      images: [],
      dialogImageVisible: false,
      dialogDescVisible: false,
      curindex: 0,
      desc: '',
      unfold: true,
      areaDataList: [], //各区县数据
      selectedArea: {}, //选择的区县默认为东营市
      classOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      classOption1: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      areaList: [],
      streetList: [],
      cemeteryList: [],
      ruleForm: {
        area: "",
        street: "",
      },
      dyRegionLayer: null, //二级区域
      streetRegionLayer: null, //三级区域
      selectedName: "", //选择区域名
      selectedSecondName: "", //三级街道
      selectedPoint: { lng: "", lat: "" },
      colors: [
        "red",
        "#FF9D4E",
        "#f639a8",
        "#A77EE2",
        "#5FCF81",
        "#89BB3F",
        "#FA6C5F",
        "#EED66F",
        "#5FCF81",
        "#FF9E4E",
        "#00AC71",
        "#00B0D3",
        "#d28e52",
        "#fc7743",
        "#6c848d",
        "#ed1941",
      ],
      //'东营市','广饶县','垦利区','利津县','河口区'
      initNames: [
        {
          id: 1,
          name: "东营区",
          label: "dongyingqu",
          lng: 118.564836,
          lat: 37.411355,
          left: -50,
          children: [
            {
              id: 11,
              parentId: 1,
              lng: 118.52488,
              lat: 37.486186,
              name: "文汇街道",
              label: "wenhuijd",
            },
            {
              id: 12,
              parentId: 1,
              lng: 118.653086,
              lat: 37.38842,
              name: "黄河路街道",
              label: "huanghelujd",
            },
            {
              id: 13,
              parentId: 1,
              lng: 118.749672,
              lat: 37.430614,
              name: "东城街道",
              label: "dongchengjd",
            },
            {
              id: 14,
              parentId: 1,
              lng: 118.470407,
              lat: 37.482864,
              name: "辛店街道",
              label: "xindianjd",
            },
            {
              id: 15,
              parentId: 1,
              lng: 118.719201,
              lat: 37.482406,
              name: "胜利街道",
              label: "shenglijd",
            },
            {
              id: 16,
              parentId: 1,
              lng: 118.455243,
              lat: 37.407628,
              name: "胜园街道",
              label: "shengyuanjd",
            },
            {
              id: 17,
              parentId: 1,
              lng: 118.446116,
              lat: 37.330595,
              name: "牛庄镇",
              label: "niuzhuangjd",
            },
            {
              id: 18,
              parentId: 1,
              lng: 118.614567,
              lat: 37.358366,
              name: "六户镇",
              label: "liuhujd",
            },
            {
              id: 19,
              parentId: 1,
              lng: 118.384169,
              lat: 37.393467,
              name: "史口镇",
              label: "shikoujd",
            },
            {
              id: 110,
              parentId: 1,
              lng: 118.296926,
              lat: 37.374886,
              name: "龙居镇",
              label: "longjujd",
            },
          ],
        },
        {
          id: 2,
          name: "广饶县",
          label: "guangraoqu",
          left: -80,
          lng: 118.492972,
          lat: 37.143961,
          children: [
            {
              id: 21,
              parentId: 2,
              lng: 118.447841,
              lat: 37.059686,
              name: "广饶街道",
              label: "guangraojd",
            },
            {
              id: 22,
              parentId: 2,
              lng: 118.383451,
              lat: 37.09677,
              name: "乐安街道",
              label: "leanjd",
            },
            {
              id: 23,
              parentId: 2,
              lng: 118.48866,
              lat: 36.982697,
              name: "大王镇",
              label: "dawangjd",
            },
            {
              id: 24,
              parentId: 2,
              lng: 118.525455,
              lat: 37.076733,
              name: "稻庄镇",
              label: "daozhuangjd",
            },
            {
              id: 25,
              parentId: 2,
              lng: 118.605655,
              lat: 37.252275,
              name: "丁庄街道",
              label: "dingzhuangjd",
            },
            {
              id: 26,
              parentId: 2,
              lng: 118.345362,
              lat: 36.997225,
              name: "李鹊镇",
              label: "liquejd",
            },
            {
              id: 27,
              parentId: 2,
              lng: 118.604506,
              lat: 37.133144,
              name: "大码头镇",
              label: "damatoujd",
            },
            {
              id: 28,
              parentId: 2,
              lng: 118.427432,
              lat: 37.192503,
              name: "花官镇",
              label: "huaguanjd",
            },
            {
              id: 29,
              parentId: 2,
              lng: 118.464657,
              lat: 37.265142,
              name: "陈官镇",
              label: "chengongjd",
            },
            {
              id: 210,
              parentId: 2,
              lng: 118.664872,
              lat: 37.290641,
              name: "东营农业高新技术产业示范区",
              label: "gaoxinjd",
            },
            {
              id: 211,
              parentId: 2,
              lng: 118.84597,
              lat: 37.311998,
              name: "广饶滨海新区",
              label: "binhaijd",
            },
          ],
        },
        {
          id: 3,
          name: "垦利区",
          label: "kenliqu",
          lng: 118.779855,
          lat: 37.629335,
          left: 0,
          children: [
            {
              id: 31,
              parentId: 3,
              lng: 118.616004,
              lat: 37.6131,
              name: "垦利街道",
              label: "kenlijd",
            },
            {
              id: 32,
              parentId: 3,
              lng: 118.469062,
              lat: 37.547095,
              name: "兴隆街道",
              label: "xinglongjd",
            },
            {
              id: 33,
              parentId: 3,
              lng: 118.417083,
              lat: 37.557738,
              name: "胜坨镇",
              label: "shengtuojd",
            },
            {
              id: 34,
              parentId: 3,
              lng: 118.374971,
              lat: 37.447233,
              name: "郝家镇",
              label: "haojiajd",
            },
            {
              id: 35,
              parentId: 3,
              lng: 118.76462,
              lat: 37.56323,
              name: "永安镇",
              label: "yonganjd",
            },
            {
              id: 36,
              parentId: 3,
              lng: 118.925308,
              lat: 37.709769,
              name: "黄河口镇",
              label: "huanghekoujd",
            },
            {
              id: 37,
              parentId: 3,
              lng: 118.349962,
              lat: 37.483666,
              name: "董集镇",
              label: "dongjijd",
            },
            {
              id: 38,
              parentId: 3,
              lng: 118.589504,
              lat: 37.577517,
              name: "开发区",
              label: "kaifaqujd",
            },
            {
              id: 39,
              parentId: 3,
              lng: 118.895413,
              lat: 37.555449,
              name: "红光办事处",
              label: "hongguangjd",
            },
            {
              id: 310,
              parentId: 3,
              lng: 118.988549,
              lat: 37.845304,
              name: "垦东",
              label: "kendongjd",
            },
            {
              id: 311,
              parentId: 3,
              lng: 118.927033,
              lat: 37.680531,
              name: "现代畜牧业示范区",
              label: "xiandaijd",
            },
            {
              id: 312,
              parentId: 3,
              lng: 118.564908,
              lat: 37.571582,
              name: "社管会",
              label: "sheguanhuijd",
            },
          ],
        },
        {
          id: 4,
          name: "利津县",
          label: "lijinqu",
          lng: 118.356717,
          lat: 37.66225,
          left: -85,
          children: [
            {
              id: 41,
              parentId: 4,
              lng: 118.285715,
              lat: 37.550414,
              name: "利津街道",
              label: "lijinjd",
            },
            {
              id: 42,
              parentId: 4,
              lng: 118.193728,
              lat: 37.512869,
              name: "凤凰城街道",
              label: "fenghuangchengjd",
            },
            {
              id: 43,
              parentId: 4,
              lng: 118.176193,
              lat: 37.444138,
              name: "北宋镇",
              label: "beisongjd",
            },
            {
              id: 44,
              parentId: 4,
              lng: 118.371952,
              lat: 37.702232,
              name: "盐窝镇",
              label: "yanwojd",
            },
            {
              id: 45,
              parentId: 4,
              lng: 118.568286,
              lat: 37.688527,
              name: "陈庄镇",
              label: "chenzhuangjd",
            },
            {
              id: 46,
              parentId: 4,
              lng: 118.54069,
              lat: 37.758627,
              name: "汀罗镇",
              label: "dingluojd",
            },
            {
              id: 47,
              parentId: 4,
              lng: 118.207239,
              lat: 37.604181,
              name: "明集乡",
              label: "mingjijd",
            },
            {
              id: 48,
              parentId: 4,
              lng: 118.62664,
              lat: 38.044271,
              name: "刁口乡",
              label: "diaokoujd",
            },
            {
              id: 49,
              parentId: 4,
              lng: 118.2362,
              lat: 37.512468,
              name: "利津县经济开发区",
              label: "kaifaqujd",
            },
            {
              id: 410,
              parentId: 4,
              lng: 118.245758,
              lat: 37.496322,
              name: "利津县县城社区管理委员会",
              label: "xianchengsqjd",
            },
          ],
        },
        {
          id: 5,
          name: "河口区",
          label: "hekouqu",
          lng: 118.58035,
          lat: 37.957375,
          left: -50,
          children: [
            {
              id: 51,
              parentId: 5,
              lng: 118.580934,
              lat: 37.939164,
              name: "河口街道",
              label: "hekoujd",
            },
            {
              id: 52,
              parentId: 5,
              lng: 118.599331,
              lat: 37.855561,
              name: "六合街道",
              label: "liuhejd",
            },
            {
              id: 53,
              parentId: 5,
              lng: 118.365628,
              lat: 37.886553,
              name: "义和镇",
              label: "yihejd",
            },
            {
              id: 54,
              parentId: 5,
              lng: 118.84827,
              lat: 38.020623,
              name: "仙河镇",
              label: "xianhejd",
            },
            {
              id: 55,
              parentId: 5,
              lng: 118.778992,
              lat: 37.857613,
              name: "孤岛镇",
              label: "gudaojd",
            },
            {
              id: 56,
              parentId: 5,
              lng: 118.349243,
              lat: 38.020169,
              name: "新户镇",
              label: "xinhujd",
            },
            {
              id: 57,
              parentId: 5,
              lng: 118.461037,
              lat: 37.958943,
              name: "河口蓝色经济开发区管理委员会",
              label: "kaifaqujd",
            },
            {
              id: 58,
              parentId: 5,
              lng: 118.528186,
              lat: 37.841086,
              name: "开发区管委会",
              label: "guanweihuijd",
            },
          ],
        },
      ],
      mapName: "",
      polygonPath: [],
      moveFlag: true,
      zoom: 10, //地图相关设置118.681385,37.439642
      center: { lng: 118.779855, lat: 37.629335 },
      map: null,
      fillLayer: null,
      markers: []
    };
  },
  watch: {
    selectedSecondName(val, oldval) {
      if(val) {

      }else{
        this.unfold = true
      }
    }
  },
  mounted() {
    this.initMap();
  },
  destroyed() {
    this.streetRegionLayer = null;
    this.dyRegionLayer = null;
  },
  created() {
    //获取区县数据
    this.getAreaCityList();
    //获取区县公墓数量
    this.getAreaCityCemeteryCount();
    //获取东营市数据
    this.getCityCount();
  },
  methods: {
    //获取公墓数
    async findCemeteryList(type,e){
      this.cemeteryList=[]
      let res = await findCemeteryList({[type]:e});
      if (res.code !== 1) return this.$message.error(res.message);
      this.cemeteryList = res.data;
      this.mapDrawMarker()
    },
    //获取东营市数据
    async getCityCount() {
      let res = await findCityData({ city: 20392 });
      if (res.code !== 1) return this.$message.error(res.message);
      this.selectedArea = res.data;
    },
    //清空区县返回市地图
    clearArea() {
      this.streetList = [];
      this.ruleForm.street = "";
      this.resetBase();
      this.zoom=10;
      this.initMap();
      
      //
      //获取东营市数据
      this.getCityCount();
    },
    //清空街道返回区县地图
    clearStreet() {
      this.selectedSecondName = "";
      this.cemeteryList = [];
      this.redrawMap();
       //获取对应公墓
       this.findCemeteryList('area',this.ruleForm.area)
    },
    //获取区县公墓数量
    async getAreaCityCemeteryCount() {
      let res = await findCountList({ city: 20392 });
      if (res.code !== 1) return this.$message.error(res.message);
      this.areaDataList = res.data;
    },
    //跳转到街道
    goToStreet(item) {
      let res = this.map.getInfoWindow()
      if(res){
        this.map.closeInfoWindow()
      }
      let point = new BMapGL.Point(
        Number(item.longitude),
        Number(item.latitude)
      );
      this.moveTo(point);
      let infoWindow = this.createInfoWindow(item)
      this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      this.initDom()
    },
    //修改街道、乡镇获取公墓数据
    async changeStreet(e) {
      if (!e) return false;
      this.findCemeteryList('street',e)
      //2、改变地图
      const findStreet = this.streetList.find((x) => x.id === e);
      this.initNames.forEach((item) => {
        if (item.name == findStreet.parentName) {
          //区名字
          item.children.forEach((child) => {
            if (child.name == findStreet.areaName) {
              //对比街道名字
              this.selectedSecondName = child.label;
              this.selectedPoint = { lng: child.lng, lat: child.lat };
              this.redrawStreetMap();
            }
          });
        }
      });
    },
    //创建信息窗口
    createInfoWindow(item){
      console.log(item,'marker-window')
      if(item.typeText=='海葬'|| item.typeText=='殡仪馆'){
        // item.image = '[{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"}]'

          this.desc = item.orgDesc
          // this.images = item.image?eval(item.image):[]
          this.images = item.images
          this.totalwidth = 120 * this.images.length
          let str = `<div style='width: 360px; overflow: hidden; padding-left: 10px; padding-bottom: 10px; margin-top: 6px;'><div id='imageList' style='width: ${this.totalwidth}px; cursor: pointer;'>`;
          this.images.forEach((image, index) => {
            str += `<img style="width: 110px; margin-right: 10px; height: 110px;float:left" src="${image}" index='${index}'/>`;
          });
          str += '<div style="clear: both;"></div></div></div>'

          // 创建图文信息窗口
          let sContent = `<div style="width:100%;height:100%;box-sizing:border-box;"><table style="width:100%;border-color:#1DF9FC;box-sizing: border-box;text-indent:5px;" border="1" cellpadding="0" cellspacing="0"><tr style="height:90px"><td colspan="2"><p style="display: -webkit-box;height:90px;line-height:30px;overflow: hidden;-webkit-box-orient: vertical;line-clamp: 3;-webkit-line-clamp: 3">简介：${ item.orgDesc ? item.orgDesc.substr(0, 70) : "" }`
          if(item.orgDesc && item.orgDesc.length > 70) {
            sContent += `...<a href="javascript:" id='viewmore' style='color: #67C23A;'>查看更多>></a>`
          }
          sContent += `</p></td></tr><tr style="min-height:100px;"><td colspan="2" style="padding:5px 0;">图片：${str}</td></tr></table></div>`;
          let opts = {
            width: 400,
            title: item.orgName
          };
          let infoWindow = new BMapGL.InfoWindow(sContent, opts);
          return infoWindow
      }else{
        //item.image = '[{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"filepath": "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"}]'

          this.desc = item.orgDesc
          this.images = item.images
          this.totalwidth = 120 * this.images.length
          let str = `<div style='width: 360px; overflow: hidden; padding-left: 10px; padding-bottom: 10px; margin-top: 6px;'><div id='imageList' style='width: ${this.totalwidth}px; cursor: pointer;'>`;
          this.images.forEach((image, index) => {
            str += `<img style="width: 110px; margin-right: 10px; height: 110px;float:left" src="${image}" index='${index}'/>`;
          });
          str += '<div style="clear: both;"></div></div></div>'

          // 创建图文信息窗口
          let sContent = `<div style="width:100%;height:100%;box-sizing:border-box;"><table style="width:100%;border-color:#1DF9FC;box-sizing: border-box;text-indent:5px;" border="1" cellpadding="0" cellspacing="0"><tr style="height:40px"><td>墓位总量：${item.graveTotal||''}</td><td>安葬量：${item.buryTotal||''}</td></tr><tr style="height:40px"><td>联系电话：${item.telephone||''}</td><td>类型：${item.typeText||''}</td></tr><tr style="height:90px"><td colspan="2"><p style="display: -webkit-box;height:90px;line-height:30px;overflow: hidden;-webkit-box-orient: vertical;line-clamp: 3;-webkit-line-clamp: 3">简介：${ item.orgDesc ? item.orgDesc.substr(0, 70) : "" }`
          if(item.orgDesc && item.orgDesc.length > 70) {
            sContent += `...<a href="javascript:" id='viewmore' style='color: #67C23A;'>查看更多>></a>`
          }
          sContent += `</p></td></tr><tr style="min-height:100px;"><td colspan="2" style="padding:5px 0;">图片：${str}</td></tr></table></div>`;
          let opts = {
            width: 400,
            title: item.orgName
          };
          let infoWindow = new BMapGL.InfoWindow(sContent, opts);
          return infoWindow
      }
      
    },
    //过滤公墓
    filterMarker(typeText) {
      let allOverlays= this.map.getOverlays()
      allOverlays.forEach(item=>{

        if(item.toString() == "Marker"){
          console.log(item,'点')
          //描点
          if(typeText=='全部'){
            item.show()
            return 
          }else{
            if(item._config.title==typeText){
              item.show()
            }else {
              item.hide()
            }
          }
          
        }
      })
    },
    //地图描点
    mapDrawMarker(typeText = '') {
      const zoom = parseInt(this.map.getZoom())
      const arr = typeText == '' ? this.cemeteryList : this.cemeteryList.filter((item) => {
        return item.typeText == typeText
      })
     
      arr.forEach((item) => {
        let point = new BMapGL.Point(item.longitude, item.latitude);
        let index = null;
        switch (item.typeText) {
          case "公益性公墓":
            index = 1;
            break;
          case "骨灰堂":
            index = 2;
            break;
          case "深埋不留坟头":
            index = 3;
            break;
          case "农村公益性公墓":
            index = 4;
            break;
          case "经营性公墓":
            index = 5;
            break;
          case "海葬":
            index = 6;
            break;
          case "殡仪馆":
            index = 7;
            break;
          default:
            index = 1;
        }
        let myIcon = new BMapGL.Icon(require(`@/assets/imgs/tip${index}.png`), new BMapGL.Size(zoom * 3, zoom * 3.5));
        // 创建标注对象并添加到地图
        let marker = new BMapGL.Marker(point, { icon: myIcon,title:item.typeText });
        this.map.addOverlay(marker);
        this.markers.push(marker)
        
        marker.addEventListener("click", ($event) => {
          event.stopPropagation();
          event.preventDefault();
          let infoWindow = this.createInfoWindow(item)
          this.map.openInfoWindow(infoWindow, point);
          setTimeout(() => {
            this.initDom()
          }, 100)
          
        })
        this.markers.push(marker)
      });
    },
    initDom() {
      this.dom = document.getElementById('imageList')
      console.log(this.dom, 'dmomomom')
      if(this.dom) {
        this.dom.addEventListener('click', (e) => {
          this.curindex = e.target.getAttribute('index')
          this.dialogImageVisible = true
        })
        if(this.images.length > 3) {
          if(window.t) {
            cancelAnimationFrame(window.t)
          }
          this.dom.addEventListener('mouseover', () => {
            cancelAnimationFrame(window.t)
          })
          this.dom.addEventListener('mouseleave', () => {
            if(window.t) {
              cancelAnimationFrame(window.t)
            }
            window.t = requestAnimationFrame(this.minusleft)
          })
          window.t = requestAnimationFrame(this.minusleft)
        }else{
          if(window.t) {
            cancelAnimationFrame(window.t)
          }
        }
      }
      if(document.getElementById('viewmore')) {
        document.getElementById('viewmore').addEventListener('click', (e) => {
          this.dialogDescVisible = true
        })
      }
    },
    minusleft() {
      this.dom.style.marginLeft = (parseFloat(this.dom.style.marginLeft || 0) - 0.5) + 'px'
      if(parseFloat(this.dom.style.marginLeft) > -this.totalwidth) {
        window.t = requestAnimationFrame(this.minusleft)
      }else{
        this.dom.style.marginLeft = 380 + 'px'
        window.t = requestAnimationFrame(this.minusleft)
      }
    },
    packupAni() {
      const dom = document.querySelector('#iconwrapper')
      if(parseFloat(dom.style.height) > 42) {
        dom.style.height = parseFloat(dom.style.height) - 4 + 'px'
        dom.style.width = parseFloat(dom.style.width) - 1 + 'px'
        window.t1 = requestAnimationFrame(this.packupAni)
      }else{
        this.unfold = false
        cancelAnimationFrame(window.t1)
      }
    },
    packup() {
      if(window.t1) {
        cancelAnimationFrame(window.t1)
      }
      window.t1 = requestAnimationFrame(this.packupAni)
    },
    unfolderAni() {
      const dom = document.querySelector('#iconwrapper')
      if(parseFloat(dom.style.height) < 355) {
        dom.style.height = parseFloat(dom.style.height) + 4 + 'px'
        dom.style.width = parseFloat(dom.style.width) + 1 + 'px'
        window.t1 = requestAnimationFrame(this.unfolderAni)
      }else{
        this.unfold = true
        cancelAnimationFrame(window.t1)
      }
    },
    unfolder() {
      if(window.t1) {
        cancelAnimationFrame(window.t1)
      }
      window.t1 = requestAnimationFrame(this.unfolderAni)
    },
    //获取区县数据
    async getAreaCityList() {
      let params = {
        currentPage: 1,
        exportExcelFlag: 0,
        id: 20392,
        orderField: "id",
        orderType: "asc",
        pageSize: 20,
      };
      let res = await loadAdministrativeAreaListWithParentId(params);
      if (res.code !== 1) return this.$message.error(res.message);
      this.areaList = res.data.list;
    },
    //修改区县拉取街道乡镇
    async changeArea(e) {
      if (!e) return false;
      
      //1、获取街道乡镇数据
      this.streetList = [];
      this.cemeteryList = [];
      this.ruleForm.street = "";
      let params = {
        currentPage: 1,
        exportExcelFlag: 0,
        id: e,
        orderField: "id",
        orderType: "asc",
        pageSize: 20,
      };
      let res = await loadAdministrativeAreaListWithParentId(params);
      if (res.code !== 1) return this.$message.error(res.message);
      this.streetList = res.data.list;
      //2、改变地图
      const findArea = this.areaList.find((x) => x.id === e);
      this.initNames.forEach((item) => {
        if (item.name == findArea.areaName) {
          this.selectedName = item.label;
          this.selectedPoint = { lng: item.lng, lat: item.lat };
          this.selectedSecondName = "";
          this.map.centerAndZoom(this.selectedPoint, 11);
          this.redrawMap();
          //获取对应公墓
          this.findCemeteryList('area',e)
        }
      });
      //3、修改固定底部的数据
      console.log(e,this.areaDataList,'修改区县')
      this.selectedArea=this.areaDataList.find(x=>x.area==e)
    },
    //初始化地图
    initMap() {
      this.map = new BMapGL.Map("allmap", {
        minZoom: 1,
        maxZoom: 18
      });
      let point = new BMap.Point(this.center.lng, this.center.lat);
      this.map.centerAndZoom(point, this.zoom);
      this.map.enableScrollWheelZoom(true);
      this.map.enableContinuousZoom(); // 开启双击平滑缩放效果
      this.map.setMapType("BMAP_SATELLITE_MAP");
      this.map.addControl(new BMap.NavigationControl());      
      this.map.addControl(new BMap.ScaleControl());   
      this.map.addEventListener('zoomend', (e) => {
        // let zoom= this.map.getZoom()
        // let index=null
        // let preMarker =null
        // let allOverlays= this.map.getOverlays();
       
        //   allOverlays.forEach(item=>{
        //     if(item.toString() == "Marker"){
        //       //marker
        //       this.map.removeOverlay(item)
        //       switch (item._config.title) {
        //           case "公益性公墓":
        //             index = 1;
        //             break;
        //           case "骨灰堂":
        //             index = 2;
        //             break;
        //           case "深埋不留坟头":
        //             index = 3;
        //             break;
        //           case "农村公益性公墓":
        //             index = 4;
        //             break;
        //           default:
        //             index = 5;
        //         }
        //         let myIcon = new BMapGL.Icon(require(`@/assets/imgs/tip${index}.png`), new BMapGL.Size(zoom * 3, zoom * 3.5));
        //         // 创建标注对象并添加到地图
        //         let marker = new BMapGL.Marker(item.point, { icon: myIcon,title:item._config.title });
                
        //         this.map.addOverlay(marker);
        //         // this.map.removeOverlay(item)
        //     }
        //   })
          //  this.map.setViewport(points);
        // while(this.markers.length > 0) {
        //   this.map.removeOverlay(this.markers.pop())
        // }
        // this.mapDrawMarker()
      })
      this.drawArea();
      this.findCemeteryList('city',20392)
    },
    //加载图层
    drawArea() {
      this.resetBase();
      this.initNames.forEach((item, index) => {
        let bd = new BMap.Boundary();
        bd.get(`东营市${item.name}`, (rs) => {
          let count = rs.boundaries.length; //行政区域的点有多少个
          if (count === 0) {
            // alert("未能获取当前输入行政区域");
            return;
          }

          for (let i = 0; i < count; i++) {
            let ply = new BMapGL.Polygon(rs.boundaries[i], {
              strokeWeight: 2,
              fillColor: this.colors[index],
              fillOpacity: "0.8",
              strokeColor: "#eee",
            }); //建立多边形覆盖物
            //添加覆盖物
            ply.addEventListener("click", (res) => {
              //1、绘制二级
              this.selectedPoint = res.latLng;
              this.selectedName = item.label;
              this.selectedSecondName = "";
              this.redrawMap();
              //2、联动区县
              let findArea = this.areaList.find((x) => x.areaName == item.name);
              this.ruleForm.area = findArea.id;
              this.changeArea(this.ruleForm.area);
            });
            this.map.addOverlay(ply);
          }
        });
      });
    },
    //加载一级标识
    addLabel(item, ply) {
      //添加名称标签层
      let centerLabel = new BMapGL.Label(item.name, {
        offset: new BMap.Size(item.left, 0),
      });
      centerLabel.setPosition(ply.getBounds().getCenter());
      centerLabel.setStyle({
        color: "#fff",
        fontFamily: "微软雅黑",
        backgroundColor: "transparent",
        border: "none",
      });
      this.map.addOverlay(centerLabel);
    },
    //重绘二级区县地图
    redrawMap() {
      let mapData = require(`../../static/map/${this.selectedName}/index.json`);
      this.map.clearOverlays();
      this.map.removeGeoJSONLayer(this.streetRegionLayer);
      this.dyRegionLayer = new BMapGL.GeoJSONLayer("dy-child", {
        reference: "GCJ02",
        dataSource: mapData, // 数据
        level:-10, // 显示层级，由于系统内部问题，GeoJSONLayer图层等级使用负数表达，负数越大层级越高，默认-99
        minZoom: 7, // 设置图层显示的地图最小等级
        maxZoom: 19, // 设置图层显示的地图最大等级
        polylineStyle: (properties) => {
          console.log(properties,'划线')
          return {
            // strokeColor: "#fff",
          };
        },
        polygonStyle: (properties) => {
          // console.log(properties,'区域颜色')
          return {
            strokeColor: '#fff',
                strokeWeight: 2,
                fillOpacity: 0.7,
            fillColor: properties.stroke,
          };
        },
        markerStyle: (properties) => {
          console.log(properties,'描点')
          return {};
        },
      });
      this.dyRegionLayer.addEventListener("click", (e) => {
        if (e.features) {
          this.selectedSecondName = e.features[0].properties.label;
          this.selectedPoint = e.latLng;
          //绘制三级街道地图
          this.redrawStreetMap();
          //联动街道、乡镇下拉
          let name = e.features[0].properties.name;
          let findStreet = this.streetList.find((x) => x.areaName == name);
          // console.log(findStreet,'街道')
          this.ruleForm.street = findStreet.id;
          this.changeStreet(this.ruleForm.street);
        } else {
          // resetGeoLayer1();
          // map.removeOverlay(label);
        }
      });
      this.map.addGeoJSONLayer(this.dyRegionLayer);
      // bjRegionLayer.addOverlay([polyline,polygon]);
      this.zoom=12
      this.map.centerAndZoom(this.selectedPoint, this.zoom);
      mapData.features.forEach((item) => {
        this.addSecondLabel(item);
      });
    },
    //绘制三级街道地图
    redrawStreetMap(typeText = '') {
      this.map.removeGeoJSONLayer(this.dyRegionLayer);
      //绘制三级地图
      let mapData = require(`../../static/map/${this.selectedName}/${this.selectedSecondName}.json`);
      this.map.clearOverlays();
      this.streetRegionLayer = new BMapGL.GeoJSONLayer("dy-grandson", {
        reference: "GCJ02",
        dataSource: mapData, // 北京各区数据
        level: -10, // 显示层级，由于系统内部问题，GeoJSONLayer图层等级使用负数表达，负数越大层级越高，默认-99
        minZoom: 7, // 设置图层显示的地图最小等级
        maxZoom: 19, // 设置图层显示的地图最大等级
        polylineStyle: (properties) => {
          return {
            strokeColor: "#fff",
          };
        },
        polygonStyle: (properties) => {
          return {
            strokeColor: '#fff',
                strokeWeight: 2,
                fillOpacity: 0.7,
            fillColor: properties.stroke,
          };
        },
        markerStyle: (properties) => {
          return {};
        },
      });
      this.streetRegionLayer.addEventListener("click", (e) => {
        if (e.features) {
        }
      });
      this.map.addGeoJSONLayer(this.streetRegionLayer);
      this.mapDrawMarker(typeText);
      this.zoom=13
      this.map.centerAndZoom(this.selectedPoint, this.zoom);
      mapData.features.forEach((item) => {
        this.addSecondLabel(item);
      });
    },
    //二级/三级label
    async addSecondLabel(item) {
      let centerLabel = new BMapGL.Label(item.properties.name, {
        offset: new BMapGL.Size(-20, -45),
      });
      let point = await this.getCentroid(item.geometry);
      centerLabel.setPosition(point);
      centerLabel.setStyle({
        color: "#000",
        fontFamily: "微软雅黑",
        fontSize: "14px",
        backgroundColor: "transparent",
        border: "none",
      });
      this.map.addOverlay(centerLabel);
    },
    //获取中心坐标
    getCentroid(geometry) {
      var p = new Promise((resolve, reject) => {
        const reader = new jsts.io.GeoJSONReader();
        const geom = reader.read(geometry);
        const centroid = new jsts.algorithm.Centroid(geom);
        const centroidPoint = centroid.getCentroid();
        resolve({ lng: centroidPoint.x, lat: centroidPoint.y });
      });
      return p;
    },
    //返回回市
    backCity() {
      this.ruleForm.area = "";
      this.ruleForm.street = "";
      this.cemeteryList = [];
      this.zoom=10;
      this.initMap();
    },
    //返回区县
    backAreaCounty() {
      this.ruleForm.street = "";
      this.cemeteryList = [];
      this.selectedSecondName = "";
      this.redrawMap();
       //获取对应公墓
       this.findCemeteryList('area',this.ruleForm.area)
    },
    resetBase() {
      this.map.clearOverlays();
      this.dyRegionLayer = null; //二级区域
      this.streetRegionLayer = null; //三级区域
      this.selectedName = ""; //选择区域名
      this.selectedSecondName = ""; //三级街道
      this.selectedPoint = { lng: "", lat: "" };
    },
    moveTo(point) {
      this.zoom=14
      this.map.centerAndZoom(point, this.zoom);
    },
    color16() {
      //十六进制颜色随机
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      const color = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
      return color;
    },
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.map_chart);
      // 获取中国地图的矢量数据
      // http://localhost:8999/static/map/china.json
      // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
      this.$echarts.registerMap("dongying", dongyingMapData);
      const initOption = {
        title: {
          text: "▎ 公墓分布",
          left: 20,
          top: 20,
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
            },
          },
        }, // 提供下载工具
        visualMap: {
          min: 0,
          max: 100000,
          left: 26,
          bottom: 40,
          showLabel: !0,
          // text: ["土葬", "智慧殡葬"],
          pieces: this.pieces,
          color: this.colors,
          show: true,
        },
        geo: {
          // type: "map",
          map: "dongying",
          //  默认设置完地图是固定死的不能拖动
          // roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
          roam: 1,
          //zoom :1,//当前视角的缩放比例。越大比例越大
          // center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
          // label:{//地图上显示文字提示信息
          //   show:true,
          //   // color:"#ff6600",
          //   fontSize:10//字体大小
          // },
          label: {
            normal: {
              // formatter:(params)=>{
              //     console.log(params,'747')
              //     // if(params.name=="庐阳区"||params.name=="肥东县"||params.name=="濉溪县"||params.name=="埇桥区"||params.name=="萧县"||params.name=="蚌山区"||params.name=="颍泉区"||params.name=="临泉县"||params.name=="太和县"||params.name=="舒城县"||params.name=="当涂县"||params.name=="南陵县"){
              show: !0,
              fontSize: "7",
              color: "#000",
            },
          },
          itemStyle: {
            normal: {
              // areaColor: "#f2d5ad",
              // areaColor: "#ff3940",
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
          },
          label: {
            show: true,
            fontSize: "10",
            color: "#fff",
          },
        },
        series: [
          {
            name: "殡葬",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      this.chartInstance.setOption(initOption);
      let bmap = this.chartInstance.getModel().getComponent("bmap").getBMap();
      bmap.addControl(new BMap.MapTypeControl());
      this.chartInstance.on("click", async (arg) => {
      });
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
    },
    mapReady({ BMap, map }) {
      this.map = map;
      // let mapStyle = { style: "midnight" };
      // map.setMapStyle(mapStyle);
      let geolocation = new BMap.Geolocation();
      // 开启SDK辅助定位
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition((r) => {}, {
        enableHighAccuracy: true, //要求浏览器获取最佳结果
      });
    },
    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom();
      const position = e.target.getCenter();
      // 此时已经可以获取到BMap类
      if (this.map) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.map.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(position, function (res) {
          // console.log('获取经纬度', position, '获取详细地址', res)
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...position,
          };
          that.$emit("changeCenter", {
            zoom: that.zoom,
            location: that.choosedLocation,
          });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog{
  border-radius: 20px;
  background: #04132c !important;
  color: #1df9fc !important;
  .el-dialog__title{
    color: #1df9fc !important;
  }
  .el-dialog__headerbtn .el-dialog__close{
    color: #1df9fc !important;
  }
  .el-dialog__body{
    color: #1df9fc !important;
  }
}
.empty_box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: .625rem;
  img{
    width: 1.675rem;
    display: block;
    height: 1.65rem;
  }
  span{
    font-size: .25rem;
  }
}
.prev,.next,.curimg{
  display: inline-block;
  vertical-align: middle;
}
.prev,.next{
  font-size: 60px;
  cursor: pointer;
}
.curimg{
  width: calc(100% - 120px);
}
.image-dialog /deep/ .el-dialog__body{
  padding: 10px 0 20px 0;
}
.desc{
  display: block;
  width: 90%;
  margin: 0 auto;
  line-height: 26px;
}
.icon-wrapper{
  position: fixed;
  right: 10px;
  top: calc(0.83rem + 40px);
  z-index: 2000;
  background-color: rgba(60, 100, 70, 0.5);
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
  .toggle-icon{
    font-size: 36px;
    color: white;
    display: block;
    text-align: center;
    cursor: pointer;
  }
  .icon-item{
    margin-bottom: 4px;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    height: 36px;
    -webkit-line-clamp: 1;
    cursor: pointer;
  }
  .icon-item img,.icon-item em{
    display: inline;
    vertical-align: top;
  }
  .icon-item em{
    font-style: normal;
    font-size: 14px;
    line-height: 32px;
  }
}

/deep/ .BMap_bubble_pop {
  background: #04132c !important;
  color: #1df9fc !important ;
  .BMap_bubble_center {
    width: 100% !important;
    .BMap_bubble_content {
      width: 100% !important;
    }
  }
}
/deep/ .BMap_bubble_top {
  .BMap_bubble_title {
    color: #1df9fc !important ;
  }
  .BMap_bubble_buttons {
    div {
      color: #1df9fc !important ;
    }
  }
}
/deep/ .BMap_bubble_pop {
  border: none !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  img {
    display: none !important;
  }
  .BMap_bubble_content{
    table{
      img{
      display: inline-block!important;
    }
    }

  }
}
/deep/ .BMap_bubble_center {
  .BMap_bubble_content {
    color: #1df9fc !important ;
    table {
      border-color: #1df9fc !important;
    }
  }
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 0;
}
.map {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /deep/ .el-form-item__label {
    color: #1df9fc;
  }
  .container {
    flex: 1;
    width: 100%;
    position: relative;
    .map-contain {
      width: 100%;
      height: 100%;
    }
    /deep/ .el-button--primary.model_close {
      background-color: #04132c;
      position: absolute;
      left: 0.15rem;
      top: 0;
      z-index: 122;
    }
    .back1_btn {
      background-color: #04132c;
      position: absolute;
      right: 0.15rem;
      top: 0;
      z-index: 122;
    }
    .back2_btn {
      background-color: #04132c;
      position: absolute;
      right: 1.6rem;
      top: 0;
      z-index: 122;
    }
    /* 左侧弹窗 */
    .left_model {
      width: 5rem;
      height: 95%;
      position: absolute;
      left: 0.15rem;
      top: 4%;
      padding: 0 0.15rem;
      background-image: url("~@/assets/imgs/model_bg1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      transition: all 2s;
      z-index: 120;
      display: flex;
      flex-direction: column;

      .left_model_content {
        position: relative;
        width: 100%;
        height: 100%;
        font-size: 0.275rem;
        overflow: hidden;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: bold;
        color: #bfe8ff;
        line-height: 0.5rem;
        text-align: center;
        color: #1df9fc;
        /* margin-bottom: 20px; */
        .content_title {
          // line-height: 0.625rem;
          line-height: .75rem;
        }
        .scroll_box {
          width: 100%;
          height: 50%;
          margin-bottom: 0.125rem;
          .seamless_warp {
            width: 100%;
            // height: calc(100% - 2.125rem);
            height: 100%;
            overflow: hidden;
            .list_item {
              // background: #04132c;
              background: url('../assets/imgs/item.png') no-repeat ;
              background-size: 100% 100%;
              margin-bottom: 0.25rem;
              padding: 0.1875rem;
              padding-top: 0;
              border-radius: 0.1875rem;
              text-align: left;
              font-size: 14px;
              cursor: pointer;
             
              .item_title{
                color: #fff;
                line-height: .575rem;
              }
              .item_type{
                color: #fff;
               line-height:1em;
                margin-top: .125rem;
              }
              .item_desc {
                display: -webkit-box;
                height: .75rem;
                line-height: .375rem;
                overflow: hidden;
                -webkit-box-orient: vertical;
                line-clamp: 2;
                -webkit-line-clamp: 2; //显示几行
              }
            }
          }
        }
        .bottom_box {
          width: 100%;
          height: 35%;
          .bottom_top {
            width: 100%;
            padding: 0 0 0.125rem;
            // background: pink;
            .top_title {
              font-size: 16px;
              line-height: 1em;
              margin-bottom: 0.0625rem;
            }
            .data_box {
              display: flex;
              align-items: center;
              justify-content: space-around;
              .box_item {
                width: 1.3rem;
                height: 1.175rem;
                background: url("../assets/imgs/lititle.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                .font_number {
                  font-size: 0.325rem;
                }
              }

              .box_item:nth-child(1) {
                color: #1df9fc;
              }
              .box_item:nth-child(2) {
                color: #ff9c5d;
              }
              .box_item:nth-child(3) {
                color: #3b80ff;
              }
            }
          }
          .bottom_warp {
            width: 100%;
            height: 1.5625rem;
            // height: 1.5625rem;
            overflow: hidden;
            .list_item {
              margin-bottom: 0.125rem;
              .item_title {
                font-size: 16px;
              }
              .item_box {
                display: flex;
                align-items: center;
                justify-content: space-around;
                .box_item {
                  width: 1.3rem;
                  height: 1.175rem;
                  background: url("../assets/imgs/lititle.png") no-repeat;
                  background-size: 100% 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  font-weight: 600;
                  .font_number {
                    font-size: 0.325rem;
                  }
                }
                .box_item:nth-child(1) {
                  color: #1df9fc;
                }
                .box_item:nth-child(2) {
                  color: #ff9c5d;
                }
                .box_item:nth-child(3) {
                  color: #3b80ff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
